<template>
  <div class="app-container">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
      <el-button
        type="primary"
        icon="el-icon-edit"
        @click="$router.push({path:'/knowledge/createSort'})"
      >新增</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        row-key="id"
        :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
        v-loading="listLoading"
        fit
        highlight-current-row
        class="c-width100 color-222 family-PingFangSC-Regular font-s12"
      >
        <el-table-column align="center" label="顺序号">
          <template slot-scope="scope">
            <span>{{scope.row.classsort}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="classname" label="资料类别"></el-table-column>
        <el-table-column align="center" label="操作" v-if="permission == 3">
          <template slot-scope="scope">
            <p style="color: red;">
              <b @click="deleteSort(scope.row.companyId)">删除</b>
              <span class="color-409">|</span>
              <b @click="editDatumSort(scope.row)">修改</b>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { classGet, classDel } from "@/api/column";
import { knowledge_datums } from "@/utils/permission";
export default {
  data() {
    return {
      permission: 3,
      listQuery: {
        page: 1,
        limit: 10,
        currentPage: 1, // 当前页
        total: null // 数据总条数
      },
      listLoading: false,
      tableData: []
    };
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_datums();
    },
    checkMore(message) {
      this.$alert(message, "", { confirmButtonText: "关闭" });
    },
    getCatList() {
      this.listLoading = true;
      classGet()
        .then(res => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.data.data;
            this.listQuery.total = res.data.data.total;
            this.listLoading = false;
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log("1111");
          console.log(err);
        });
    },
    deleteSort(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          classDel({ classId: id })
            .then(res => {
              if (res.data.statusCode == 200) {
                this.$message({
                  type: "success",
                  message: res.data.data
                });
                this.getCatList();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    editDatumSort(item) {
      this.$router.push({
        path: `/knowledge/createSort`,
        query: {
          id: item.classId,
          name:item.classname,
          classsort:item.classsort
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页几条数据方法
      this.listQuery.limit = val;
      this.getCatList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // 切换当前页
      this.listQuery.page = val;
      this.getCatList();
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    this.getModelPermission();
    this.getCatList();
    this.listQuery.total = this.tableData.length;
  }
};
</script>

<style scoped>
b:hover {
  color: #0a76a4;
}
b {
  padding: 0 10px;
  cursor: pointer;
  font-weight: 500;
}
.block {
  padding: 20px 0;
}
.text-c {
  text-align: center;
}
</style>
